<template>
  <div class="login-container">
    <div data-v-81300996="" class="shadow" />
    <video data-v-81300996="" src="https://slwl-admin.itheima.net/static/media/video.3cf57b17.mp4" autoplay="autoplay" loop="loop" muted="muted" style="width: 100%; height: 100%; object-fit: fill;" />
    <div class="form">
      <el-card shadow="never" class="login-card">
        <el-form ref="loginForm" :model="loginForm" :rules="rules">
          <h1><img src="https://slwl-admin.itheima.net/static/img/logo1.33ef7fa0.png" alt=""></h1>
          <el-form-item prop="account">
            <el-input
              v-model="loginForm.account"
              placeholder="账号"
              prefix-icon="el-icon-user-solid"
            />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              placeholder="密码"
              prefix-icon="el-icon-unlock"
              show-password
            />
          </el-form-item>
          <el-form-item prop="code">
            <el-input
              v-model="loginForm.code"
              placeholder="验证码"
            />
            <img :src="url" alt="" class="code-image" @click="updateCode">
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :loading="isloading" @click="hLogin">登录</el-button>
          </el-form-item>
        </el-form>
        <!--登录表单-->
      </el-card>
    </div>
  </div>
</template>
<script>
import { randomNum } from '@/utils'
import { getCode } from '@/api/user'
export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        account: 'shenlingadmin',
        password: '123456',
        code: null
      },
      key: '',
      url: '',
      isloading: false,
      rules: {
        account: [{ required: true, message: '请输入用户名', trigger: 'blur' },
          { pattern: /^[a-zA-Z]+$/, message: '请输入正确的用户名', trigger: 'blur' }
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 16, message: '请输入正确的密码', trigger: 'blur' }
        ],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.updateCode()
  },
  methods: {
    async dLogin() {
      const data = { ...this.loginForm }
      data.key = this.key
      data.tenant = '0000'
      console.log(data)
      this.isloading = true
      try {
        await this.$store.dispatch('user/login', data)
        this.$router.push('/')
      } catch (error) {
        // console.log(error.data.msg)
        // 更新验证码
        this.updateCode()
      }
      // this.$refs.loginForm.validate(val => val && alert('校验通过')),
    },
    // 兜底校验
    hLogin() {
      this.$refs.loginForm.validate(valid => valid && this.dLogin())
    },
    async updateCode() {
      this.key = randomNum()
      const res = await getCode(this.key)
      console.log(res)
      this.url = `data: image/jpeg;base64,${btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))}`
    }
  }
}
</script>
<style lang="scss" scoped>

.login-container {
  background-size: 100% 100%;
    height: 100vh;
    overflow-y: hidden;
    position: relative;
  .shodaw{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: .3;
    background: #1a1c41;
  }
  .video{
    overflow-clip-margin: content-box;
    overflow: clip;
  }
  .form {
    display: flex;
    position: absolute;
    top: 45%;
    left: 45%;
    margin: -180px 0 0 -160px;
    width: 450px;
    height: 490px;
    // padding: 36px 40px;
    background: #fff;
    border-radius: 10px;
    justify-content:center ;
    .el-card {
      border: none;
      padding: 0;
    }
    h1 {
    position: relative;
    margin-bottom: 28px;
    text-align: center;
      img{
        height: 54px;
      }
    }
    .el-form-item{
    position: relative;
    width: 300px;
    border-radius: 5px;
    color: #454545;
    -webkit-transition: all .3s;
    transition: all .3s;
    margin-bottom: 22px;
     .el-input {
    position: relative;
    font-size: 14px;
    display: inline-block;
    width: 100%;
    }
    .code-image{
    display: inline-block;
    vertical-align: middle;
    width: 71px;
    height: 32px;
    cursor: pointer;
    margin-left: 10px;
    position: absolute;
    right: 5px;
    top: 4px;
    }
     .el-button {
    width: 100%;
    height: 54px;
    margin-bottom: 14px;
    margin-top: 22px;
    background-color: #e15536;
    border: 0;
    font-size: 18px;
    color: #fff;
    font-weight: 700;
    }
    }

  }
}
</style>
